<template>
    <div class="step">
        <div style="width: 60%;height: 100%;margin: 20px auto">
            <div style="width:100%;height: 12%;background-color: #324157;border-radius: 5px"></div>
            <div class="bed-img">
                <el-popconfirm
                    title='确认选择1号床'
                    @confirm="chooseBed(this.bedInfo[0].dormId,1)"
                >
                    <template #reference>
                        <el-button class="bed1" size="mini" circle :disabled="this.bedInfo[0].choose === 1">&nbsp;1&nbsp;</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    title='确认选择2号床'
                    @confirm="chooseBed(this.bedInfo[1].dormId,2)"
                >
                    <template #reference>
                        <el-button class="bed2" size="mini" circle :disabled="this.bedInfo[1].choose === 1">&nbsp;2&nbsp;</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    title='确认选择3号床'
                    @confirm="chooseBed(this.bedInfo[2].dormId,3)"
                >
                    <template #reference>
                        <el-button class="bed3" size="mini" circle :disabled="this.bedInfo[2].choose === 1">&nbsp;3&nbsp;</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    title='确认选择4号床'
                    @confirm="chooseBed(this.bedInfo[3].dormId,4)"
                >
                    <template #reference>
                        <el-button class="bed4" size="mini" circle :disabled="this.bedInfo[3].choose === 1">&nbsp;4&nbsp;</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    title='确认选择5号床'
                    @confirm="chooseBed(this.bedInfo[4].dormId,5)"
                >
                    <template #reference>
                        <el-button class="bed5" size="mini" circle :disabled="this.bedInfo[4].choose === 1">&nbsp;5&nbsp;</el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    title='确认选择6号床'
                    @confirm="chooseBed(this.bedInfo[5].dormId,6)"
                >
                    <template #reference>
                        <el-button class="bed6" size="mini" circle :disabled="this.bedInfo[5].choose === 1">&nbsp;6&nbsp;</el-button>
                    </template>
                </el-popconfirm>
            </div>
            <span style="color: #aaaaaa;border-style: solid;border-radius:10px;margin: auto" v-show="isShow">你已选择床位:&nbsp;{{this.bed}}</span>
        </div>
    </div>
</template>

<script>
import request from '../../utils/request'

export default {
	data() {
		return {
			bedInfo: [
				{choose: 0, dormId: 0},
				{choose: 0, dormId: 0},
				{choose: 0, dormId: 0},
				{choose: 0, dormId: 0},
				{choose: 0, dormId: 0},
				{choose: 0, dormId: 0}
			],
			dorm: {
				dormId: '',
			},
			bed: '',
			isShow: false
		}
	},
	created() {
		this.getBed()
	},
	methods: {
		chooseBed(n, bedN) { // 选择床位
			this.$store.commit('SET_BED', n);
			this.bed = bedN;
			this.dorm.dormId = this.$store.getters.getBed;
			this.isShow = true
		},
		getBed() { // 获取可选床位
			request({
				method: 'get',
				url: '/api/dorm/getBedNumber',
				params: { region: this.$store.getters.getRegion, dormNumber: this.$store.getters.getRoom}
			}).then(res => {
				if (res.code === 200) {
					this.bedInfo = res.data;
				}
			})
		}
	},
}
</script>

<style lang="less" scoped>
@imgcolor: #ffffff;

.step {
    width: 100%;
    height: 100%;
    margin: auto;
}

.bed-img {
    width: 80%;
    height: 75%;
    margin: 10px auto;
    background: url("../../assets/bed/dongyuan.png") no-repeat;
    background-size: 70% 100%;
    background-position: center 0;
}

.bed1 {
    background-color: @imgcolor;
    top: 60px;
    left: 260px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s;
}

.bed2 {
    background-color: @imgcolor;
    top: 80px;
    left: 150px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s;
}

.bed3 {
    background-color: @imgcolor;
    top: 87px;
    left: 75px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s;
}


.bed4 {
    background-color: @imgcolor;
    top: 87px;
    right: 85px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s;
}


.bed5 {
    background-color: @imgcolor;
    top: 82px;
    right: 155px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s;
}

.bed6 {
    background-color: @imgcolor;
    top: 75px;
    right: 230px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s;
}

.bed1:hover {
    background-color: #87e06c;
    color: #ffffff;
    transform: translateY(-5px);
    transition: transform 0.4s;
}

.bed2:hover {
    background-color: #87e06c;
    color: #ffffff;
    transform: translateY(-5px);
    transition: transform 0.4s;
}

.bed3:hover {
    background-color: #87e06c;
    color: #ffffff;
    transform: translateY(-5px);
    transition: transform 0.4s;
}

.bed4:hover {
    background-color: #87e06c;
    color: #ffffff;
    transform: translateY(-5px);
    transition: transform 0.4s;
}

.bed5:hover {
    background-color: #87e06c;
    color: #ffffff;
    transform: translateY(-5px);
    transition: transform 0.4s;
}

.bed6:hover {
    background-color: #87e06c;
    color: #ffffff;
    transform: translateY(-5px);
    transition: transform 0.4s;
}

</style>
